<template>
  <p style="text-align: left">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="出库主题">
        <el-input
          v-model="formInline.OutTopic"
          placeholder="请输入出库主题"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getOutWareHouseList">查询</el-button>
        <el-button type="success" @click="showTypeSelection">添加</el-button>
        <el-dialog v-model="dialogVisible" title="选择类型">
          <el-select v-model="selectedType" placeholder="请选择类型">
            <el-option label="内部领用" value="内部领用"></el-option>
            <el-option label="委外领料" value="委外领料"></el-option>
            <el-option label="销售出库" value="销售出库"></el-option>
            <el-option label="采购退货" value="采购退货"></el-option>
            <el-option label="其他出库" value="其他出库"></el-option>
          </el-select>
          <el-button type="primary" @click="goToAddPage">确认</el-button>
        </el-dialog>
      </el-form-item>
    </el-form>
  </p>
  <el-table ref="multipleTableRef" :data="outWareHouseList" style="width: 100%">
    <el-table-column label="序号" width="70" align="left">
      <template #default="scope">
        {{ scope.$index + (pageIndex - 1) * pageSize + 1 }}
      </template>
    </el-table-column>
    <el-table-column property="OutType" label="出库类型" width="120" />
    <el-table-column property="OutNum" label="出库单号" width="120" />
    <el-table-column property="OutTopic" label="出库主题" width="120" />
    <el-table-column property="OutDate" label="出库日期" width="120" />
    <el-table-column property="OutWareHouse" label="出库仓库" width="120" />
    <el-table-column property="Applicant" label="申领人员" width="120" />
    <el-table-column property="OutName" label="出库人员" width="120" />
    <el-table-column property="OutCount" label="出库数量" width="120" />
    <el-table-column property="MatPrice" label="单价" width="120" />
    <el-table-column label="总金额" width="120">
      <template #default="{ row }">
        <span>{{ row.OutCount * row.MatPrice }}</span>
      </template>
    </el-table-column>
    <el-table-column property="Remark" label="备注" width="120" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="updOut(scope.row.OutId)"
          >编辑出库信息</el-button
        >
        <el-button
          link
          type="danger"
          size="small"
          @click="delOut(scope.row.OutId)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="pageIndex"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import axios from "axios";
import { reactive, toRefs, ref, computed } from "vue";
import { ElInput, ElMessage, ElMessageBox, ElTableColumn } from "element-plus";
import { ElTable } from "element-plus";
//引用路由
import { useRouter, useRoute } from "vue-router";
//定义单价和数量
const quantity = ref(0);
const unitPrice = ref(0);
const router = useRouter();
const route = useRoute();
const pageIndex = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const totalAmount = ref(0);
const outWareHouseList = ref([]);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const formInline = reactive({
  OutTopic: "",
  OutId: "", //OutId
});
const dialogVisible = ref(false);
const selectedType = ref("");
const showTypeSelection = () => {
  dialogVisible.value = true;
};

//导出出库信息
const exportOut = () => {
  const downloadExcel = async () => {
    try {
      const response = await axios.get("OutWareHouse/ExportTab", {
        responseType: "blob",
      });

      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "出库信息表单.xlsx");
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  downloadExcel();
};
//删除出库信息（物理删除）
const delOut = (OutId: string) => {
  ElMessageBox.confirm("确认要删除该条出库信息吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios
        .delete(`OutWareHouse/DelOutById?`, {
          params: {
            outId: OutId,
          },
        })
        .then((res) => {
          if (res.data > 0) {
            ElMessage.success("删除出库信息成功");
            //调用显示出库信息方法
            getOutWareHouseList();
          } else {
            ElMessage.error("删除出库信息失败");
          }
        });
    })
    .catch(() => {});
};
//跳转到添加页面
const goToAddPage = () => {
  // 在这里处理确认按钮的点击事件
  console.log("确认选择的类型：", selectedType.value);
  dialogVisible.value = false;
  // 编程式导航到添加页面，并传递选择的类型参数
  router.push(`/UserList/out?type=${selectedType.value}`);
};
//跳转到查看Out详情页面
const checkOutDetail = (OutId: string) => {
  router.push(`/UserList/getOutId?OutId=${OutId}`);
};
// //跳转到添加页面
// const addOut = () => {
//   router.push('/UserList/out');
// }
//跳转到修改出库信息页面
const updOut = (OutId: string) => {
  router.push(`/UserList/outById?OutId=${OutId}`);
};
const handleSizeChange = (val: number) => {
  console.log("Page Size Changed to: ", val);
  pageSize.value = val;
  getOutWareHouseList();
};

const handleCurrentChange = (val: number) => {
  console.log("CurrentChange: ", val);
  pageIndex.value = val;
  getOutWareHouseList();
};
//显示出库方法
const getOutWareHouseList = () =>
  axios
    .get("OutWareHouse/GetOutWare", {
      params: {
        pageSize: pageSize.value,
        pageIndex: pageIndex.value,
        outTopic: formInline.OutTopic,
      },
    })
    .then((res) => {
      outWareHouseList.value = res.data.Data;
      quantity.value = res.data.Data.OutCount;
      unitPrice.value = res.data.Data.MatPrice;
      totalAmount.value = quantity.value * unitPrice.value;
      totalCount.value = res.data.TotalCount;
    });

//调用显示出库信息方法
getOutWareHouseList();
</script>